<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialog"
      width="1200px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      append-to-body
    >
      <div class="form" style="height: 250px; overflow-y: auto">
        <PublicForm
          ref="shippublicForm"
          :type="type"
          :form-obj="formObj"
          :form-data="formData"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="type!=='select'"
          type="primary"
          :loading="loading"
          @click="dialogOK"
        >保存</el-button>
        <el-button @click="dialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import formJs from "./js/form.js";
import { mapGetters } from "vuex";
export default {
  name: "ProFileForm",
  data() {
    return {
      id: "",
      type: "add",
      title: "电子签章",
      dialog: false, // 弹出框
      loading: false, // 按钮
      formObj: formJs.formObj,
      formData: formJs.formData
    };
  },
  computed: {
    ...mapGetters(["rolescode", "rolesname", "name"]),
  },
  watch: {
    dialog: {
      handler(newVal, oldVal) {
        if (!newVal) {
          this.resetForm();
        }
      },
    },
  },
  methods: {
    // 清空表单
    resetForm() {
      this.$refs.shippublicForm.resetForm(); // 窗口关闭清空表单
    },
    // 保存
    async dialogOK() {
      await Promise.all([
        this.$refs.shippublicForm.submitForm(),
      ]).then(
        async(res) => {
          this.loading = true;
          const formdata = JSON.parse(JSON.stringify({ ...this.formData }));
          await this.$api.utils["update_dzqz"]({ formdata })
            .then((value) => {
              this.dialog = false;
              this.$parent.query();
            })
            .catch((e) => {});
          this.loading = false;
        },
        (_) => {}
      );
    },
    // 打开表单查看或者新增或者编辑
    async opendialog(title, type, row) {
      this.dialog = true;
      this.title = title;
      this.type = type;
      // 加载数据
      // const name = this.name;
      // const now = this.$moment().format("YYYY-MM-DD HH:mm:ss");
      // const nowdate = this.$moment().format("YYYY-MM-DD");
      this.$nextTick(async() => {
        // 自己重置自己一下，防止打开表单进行校验
        this.$refs.shippublicForm.selectDic();
        this.resetForm();
        if (this.type === "edit") {
          this.formData.id = row.id;
          this.formData.table = row.table;
        }
        await this.info(row)
      });
    },
    // 获取船舶信息，并且赋值
    async info(row) {
      // 查询数
      // const $data = await this.$api.customer.getUnloadShipWTD({ id });
      // const data = this.$utils.lowerJSONKey($data);
      // this.tableData = data.zlist;
      await Promise.all([
        this.$refs.shippublicForm.formAssignment(row),
      ])
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 18px;
  color: black;
  padding: 10px;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 10px;
}
</style>
